<template>
  <Dialog v-model="dialogVisible" title="复制科目" width="600px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="原科目信息">
        <el-card class="subject-info">
          <div class="info-row">
            <span class="label">科目名称：</span>
            <span>{{ originalSubject.subjectName }}</span>
          </div>
          <div class="info-row">
            <span class="label">科目代码：</span>
            <span>{{ originalSubject.subjectCode }}</span>
          </div>
          <div class="info-row">
            <span class="label">所属计划：</span>
            <span>{{ originalSubject.planName }}</span>
          </div>
          <div class="info-row">
            <span class="label">评价方式：</span>
            <span>{{ originalSubject.evaluationMethod }}</span>
          </div>
        </el-card>
      </el-form-item>
      
      <el-form-item label="目标计划" prop="targetPlanId">
        <el-select
          v-model="formData.targetPlanId"
          placeholder="请选择目标计划"
          style="width: 100%"
          filterable
        >
          <el-option
            v-for="plan in planList"
            :key="plan.id"
            :label="plan.planName"
            :value="plan.id"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="新科目名称" prop="subjectName">
        <el-input
          v-model="formData.subjectName"
          placeholder="请输入新科目名称"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="新科目代码" prop="subjectCode">
        <el-input
          v-model="formData.subjectCode"
          placeholder="请输入新科目代码"
          maxlength="50"
        />
      </el-form-item>
      
      <el-form-item label="科目描述">
        <el-input
          v-model="formData.subjectDescription"
          type="textarea"
          :rows="3"
          placeholder="请输入科目描述"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="复制选项">
        <el-checkbox-group v-model="formData.copyOptions">
          <el-checkbox label="subjectContent">科目内容</el-checkbox>
          <el-checkbox label="evaluationRules">评价规则</el-checkbox>
          <el-checkbox label="scoringCriteria">评分标准</el-checkbox>
          <el-checkbox label="timeSettings">时间设置</el-checkbox>
          <el-checkbox label="materialRequirements">材料要求</el-checkbox>
          <el-checkbox label="questionBank">题库关联</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="是否启用">
        <el-switch
          v-model="formData.isActive"
          active-text="启用"
          inactive-text="禁用"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确认复制</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'SubjectCopy' })

const emit = defineEmits(['success'])

const dialogVisible = ref(false)
const formLoading = ref(false)
const formRef = ref()
const planList = ref([])

const originalSubject = reactive({
  id: undefined,
  subjectName: '',
  subjectCode: '',
  planName: '',
  evaluationMethod: ''
})

const formData = reactive({
  targetPlanId: undefined,
  subjectName: '',
  subjectCode: '',
  subjectDescription: '',
  copyOptions: ['subjectContent', 'evaluationRules', 'scoringCriteria'],
  isActive: true
})

const formRules = reactive({
  targetPlanId: [{ required: true, message: '请选择目标计划', trigger: 'change' }],
  subjectName: [{ required: true, message: '请输入科目名称', trigger: 'blur' }],
  subjectCode: [{ required: true, message: '请输入科目代码', trigger: 'blur' }]
})

/** 打开弹窗 */
const open = async (subject: any) => {
  dialogVisible.value = true
  Object.assign(originalSubject, subject)
  
  // 设置默认值
  formData.subjectName = `${subject.subjectName}_副本`
  formData.subjectCode = `${subject.subjectCode}_COPY`
  formData.subjectDescription = subject.subjectDescription
  
  await getPlanList()
}

/** 获取计划列表 */
const getPlanList = async () => {
  try {
    // TODO: 调用获取计划列表的API
    planList.value = []
  } catch (error) {
    console.error('获取计划列表失败:', error)
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.targetPlanId = undefined
  formData.subjectName = ''
  formData.subjectCode = ''
  formData.subjectDescription = ''
  formData.copyOptions = ['subjectContent', 'evaluationRules', 'scoringCriteria']
  formData.isActive = true
  formRef.value?.resetFields()
}

/** 提交表单 */
const submitForm = async () => {
  if (!formRef.value) return
  
  const valid = await formRef.value.validate()
  if (!valid) return
  
  try {
    formLoading.value = true
    
    const copyData = {
      originalSubjectId: originalSubject.id,
      targetPlanId: formData.targetPlanId,
      subjectName: formData.subjectName,
      subjectCode: formData.subjectCode,
      subjectDescription: formData.subjectDescription,
      copyOptions: formData.copyOptions,
      isActive: formData.isActive
    }
    
    // TODO: 调用复制科目的API
    // await copySubject(copyData)
    
    ElMessage.success('科目复制成功')
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    console.error('科目复制失败:', error)
    ElMessage.error('科目复制失败')
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
.subject-info {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: bold;
  min-width: 80px;
  color: #606266;
}
</style>
